<template>
	<view class="container">
		<image :src="'/pageschild/static/images/banner_coupon.png'" mode="widthFix" class="tui-coupon-banner"></image>
		<view class="tui-coupon-list">


			<view class="tui-coupon-item tui-top20">
				<!-- <image :src="'/pageschild/static/images/bg_coupon_3x.png'" class="tui-coupon-bg" mode="widthFix"></image> -->

				<view class="tui-coupon-item-left">
					<view class="tui-coupon-price-box">
						<view class="tui-coupon-price-sign"></view>
						<view class="tui-coupon-price">{{sum}}</view>
						<view class="tui-coupon-price-sign"></view>
					</view>
					<view class="tui-coupon-price-box">
						<view class="tui-coupon-intro">已转账数量</view>
					</view>

				</view>



			</view>

		</view>
		<view class="coupon-list">

			<view class="tui-coupon">
				<view class="coupon-items tui-top20" v-for="(item,index) in accoutList" :key="index">
					<view class="coupon-items-left">
						<view class="coupon-top">
							<view class="coupon-top-title">{{item.type_name}}</view>
							<view class="coupon-top-time">{{item.create_time}}</view>
						</view>
						<view class="coupon-con">
							{{item.text}}
						</view>

					</view>
					<view class="coupon-items-right">
						<view class="coupon-nums" :class="{'coupon-red':item.number>0}">
							{{item.number}}
						</view>
						<view class="coupon-nums-sp">结算收益</view>
					</view>
				</view>

			</view>
			<!--加载loadding-->

		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="grey"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<view v-if="accoutList==''">
			<tui-no-data :fixed="false" imgUrl="/static/images/nodata/error.png">暂无数据</tui-no-data>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				accoutList: '',
				scrollTop: 0,
				account_type:9,
				sum: 0
			}
		},
		onLoad: function(options) {
			if (options.type > 0) {
				this.account_type = options.type
			};
		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.init();
			}
		},
		methods: {
			change(e) {
				this.currentTab = e.index;
				this.pageIndex = 1;
			},
			init() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					limit: 20,
					bill_type: this.account_type,
					bill_types: 1,
					page: this.pageIndex,
					from_type: '10,11',
				};
				let accoutList = this.tui.request('user', 'post', datas, 1000, 1, '', 'bill');
				Promise.resolve(accoutList).then((value) => {
					this.accoutList = '';
					if (value.code == 10000) {
						if (value.data.data) {
							this.accoutList = value.data.data;
						}
						this.sum = -value.data.sum;
					} else {
						this.tui.toast(value.message);
					}
				})
			},
		},

		onPullDownRefresh() {
			setTimeout(() => {
				this.pullUpOn = true
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom() {
			if (!this.pullUpOn) return;
			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
			let token = this.tui.getToken();
			this.pageIndex = this.pageIndex + 1;
			let datas = {
				token: token,
				limit: 20,
				bill_type:  this.account_type,
				bill_types: 1,
				page: this.pageIndex,
				from_type: '10,11',
			};
			let accoutList = this.tui.request('user', 'post', datas, 1000, 1, '', 'bill');
			Promise.resolve(accoutList).then((value) => {
				if (value.code == 10000) {
					if (value.data.data) {
						this.accoutList = this.accoutList.concat(value.data.data);
					}
				} else {
					this.tui.toast(value.message);
				}
			})
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabs-fixed {
		position: relative !important;
		top: auto !important;
	}

	.tui-coupon {
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.coupon-top {
		color: #666;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.coupon-top-title {
		text-align: left;
		padding-right: 20rpx;
		font-size: 26rpx;
	}

	.coupon-top-time {
		color: #b3b1b1;
		font-size: 22rpx;
	}

	.coupon-list {

		/* margin: 0 25rpx; */
		position: relative;
		margin-top: 40rpx;
		box-sizing: border-box;

	}

	.tui-coupon-list {
		width: 100%;
		padding: 0 25rpx;
		position: relative;
		box-sizing: border-box;

	}

	.tui-coupon-banner {
		width: 100%;
	}

	.coupon-con {
		background: #fff;
	}

	.coupon-nums {
		color: #828080;
		font-size: 30rpx;
	}

	.coupon-red {
		color: #e41f19
	}

	.coupon-grey {
		color: #acacac
	}

	.coupon-nums-sp {
		font-size: 24rpx;
		color: #b3b1b1;
		line-height: 40rpx;
	}

	.tui-coupon-item {
		border-radius: 6rpx;
		width: 100%;

		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background: #fff;
		overflow: hidden;
	}

	.coupon-items {
		border-radius: 10rpx;
		padding: 20rpx;
		width: 100%;

		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background: #fff;
		overflow: hidden;
	}

	.coupon-floar {
		position: absolute;
		right: 0;
		top: 10rpx;
	}

	.tui-coupon-bg {
		width: 100%;
		height: 210rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.tui-coupon-sign {
		height: 110rpx;
		width: 110rpx;
		position: absolute;
		z-index: 9;
		top: -30rpx;
		right: 40rpx;
	}

	.coupon-items-left {
		color: #666;
		width: 70%;
		position: relative;
		z-index: 2;
		padding-left: 20rpx;
		display: flex;

		justify-content: flex-end;
		flex-direction: column;
		flex-shrink: 0;
	}

	.tui-coupon-item-left {
		width: 100%;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
	}

	.tui-coupon-price-box {
		display: flex;
		color: #e41f19;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 50rpx;
		line-height: 50rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}


	.tui-coupon-intro {
		background: #F7F7F7;
		padding: 8rpx 10rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: 400;
		color: #666;
		margin-top: 18rpx;
	}

	.coupon-items-right {
		flex: 1;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-coupon-item-right {
		flex: 1;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.coupon-content {
		width: 82%;
		display: flex;
		font-size: 26rpx;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 6rpx;
		background: #FFEBEB;
		color: #e41f19;
		font-size: 25rpx;
		line-height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-color-grey {
		color: #888 !important;
	}

	.tui-bg-grey {
		background: #F0F0F0 !important;
		color: #888 !important;
	}

	.tui-coupon-title {
		width: 100%;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-coupon-rule {
		padding-top: 52rpx;
	}

	.tui-rule-box {
		display: flex;
		align-items: center;
		transform: scale(0.8);
		transform-origin: 0 100%;
	}

	.tui-padding-btm {
		padding-bottom: 6rpx;
	}

	.tui-coupon-circle {
		width: 8rpx;
		height: 8rpx;
		background: rgb(160, 160, 160);
		border-radius: 50%;
	}

	.tui-coupon-text {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #666;
		padding-left: 8rpx;
		white-space: nowrap;
	}

	.tui-top20 {
		margin-top: 20rpx;
	}

	.tui-coupon-title {
		font-size: 28rpx;
		line-height: 28rpx;
	}


	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-btn-box {
		position: absolute;
		width: 146rpx;
		height: 52rpx;
		right: 20rpx;
		bottom: 40rpx;
		z-index: 10;
	}

	/* #ifdef APP-PLUS || MP */
	.wx-radio-input {
		margin-right: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-radio .uni-radio-input {
		margin-right: 0 !important;
	}

	/* #endif */
</style>
